<template>
  <!-- 模板内容完全保持不变 -->
  <view>
    <!-- 轮播图效果 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的item项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <navigator class="swiper-item" :url="getNavigatorUrl(item)">
          <image :src="item.image" mode="aspectFill"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <view>
      <view v-for="(item, index) in newsList" :key="index" class="news-item" @click="goToDetail(item)">
        <text class="news-title">{{ item.title }}</text>
        <text class="news-description">{{ item.description }}</text>
        <text class="news-date">{{ formatDate(item.published) }}</text>
      </view>
      <navigator url="https://currentsapi.services" open-type="navigate" class="attribution">
        由 Currents API 提供支持
      </navigator>
    </view>
  </view>
</template>

<script>
  // 脚本部分完全保持不变
  export default {
    data() {
      return {
        swiperList: [],
        newsList: [],
        page: 1,
        pageSize: 10,
        isload: false,
      };
    },
    computed: {

    },
    onLoad() {
      this.getswipers();
      this.fetchNews();
    },
    methods: {
      formatDate(dateString) {
        const isoDateString = dateString.replace(' ', 'T').replace(' +0000', '+00:00');
        const date = new Date(isoDateString);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      goToDetail(item) {
        uni.navigateTo({
          url: `/subpkg/api-news/api-news?title=${encodeURIComponent(item.title)}&description=${encodeURIComponent(item.description)}&date=${encodeURIComponent(item.published)}&imageUrl=${encodeURIComponent(item.image)}`,
        });
      },
      fetchNews(cd) {
        const apiKey = 'zOEj-lCmZ9i1VQV9KMlciIw4T4WA-4bzry7TO8hZhQL_k3K5';
        const url =
          `https://api.currentsapi.services/v1/latest-news?apiKey=${apiKey}&page=${this.page}&page_size=${this.pageSize}&language=zh&country=CN`;
        this.isload = true
        uni.request({
          url: url,
          method: 'GET',
          success: (res) => {
            if (res.statusCode === 200 && res.data.status === 'ok') {
              this.newsList = this.newsList.concat(res.data.news);
              this.page++;
            }
          },
          fail: (err) => {
            console.error('请求失败:', err);
          },
        });
        this.isload = false
        if (typeof cd === 'function') {
          cd();
        }
      },
      async getswipers() {
        const {
          data: res
        } = await uni.$http.get('/advertise/swiper')
        if (res.code !== 1) return uni.$showMsg();
        this.swiperList = res.data;
      },
      getNavigatorUrl(item) {
        return `/subpkg/news_detail/news_detail?url=${item.url}`;
      }
    },
    onPullDownRefresh() {
      this.page = 1
      this.isLoad = false
      this.newsList = []
      this.fetchNews(() => {
        uni.stopPullDownRefresh()
      })
    },
  }
</script>

<style lang="scss">
  /* 仅修改样式部分 */
  swiper {
    height: 350rpx;
    margin: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

    .swiper-item {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .news-item {
    margin: 20rpx;
    padding: 24rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    /* 添加阴影效果 */
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #f0f0f0;

    .news-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 16rpx;
      line-height: 1.4;
      /* 标题最多显示2行 */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .news-description {
      display: block;
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 20rpx;
      /* 描述最多显示4行 */
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .news-date {
      display: block;
      font-size: 24rpx;
      color: #999;
    }
  }

  .attribution {
    margin: 20rpx;
    padding: 20rpx;
    text-align: center;
    font-size: 24rpx;
    color: #999;
    background-color: #f9f9f9;
    border-radius: 16rpx;
  }

  text {
    user-select: text;
    -webkit-user-select: text;
  }
</style>
